<template>
  <div class="register-container">
    <form validate @submit.stop.prevent="submit">
      <input accept="image/*" @change="previewAvatar" id="imgInput" name="imageInput" type="file">
      <input v-show="false" id="avatar" type="file" name="avatar">
      <md-avatar class="md-avatar-icon md-primary md-large">
        <md-icon v-show="!resultUrl">folder</md-icon>
        <img v-show = "resultUrl" :src="resultUrl">
      </md-avatar>
      <md-input-container>
        <label>用户名</label>
        <md-input maxlength="20" name="username" required v-model="username" type="text"></md-input>
        <span class="md-error">用户名不能为空</span>
      </md-input-container>
      <md-input-container md-has-password>
        <label>密码</label>
        <md-input name="password" required v-model="password" type="password"></md-input>
        <span class="md-error">密码不能为空</span>
      </md-input-container>
      <md-input-container md-has-password>
        <label>再次输入密码</label>
        <md-input name="Password-repeat" required v-model="passwordRepeat" type="password"></md-input>
        <span class="md-error">密码不能为空</span>
      </md-input-container>
      <md-button type="submit" class="md-raised md-primary">注册</md-button>
    </form>
    <div :style="{visibility: cropperShow}" class="cropper-container-scrollable">
      <div class="img-container">
        <img :src="previewUrl" class="cropper-hidden">
      </div>
      <p style="font-size:14px">预览</p>
      <div class="docs-preview clearfix">
        <div class="img-preview preview-lg"></div>
        <div class="img-preview preview-md"></div>
        <div class="img-preview preview-sm"></div>
        <div class="img-preview preview-xs"></div>
      </div>
      <md-button @click.native="getCropperData" class="md-raised md-primary">裁剪</md-button>
    </div>
  </div>
</template>

<script>
import { register } from './../../service/getData'
import Cropper from 'cropperjs'
require('cropperjs/dist/cropper.min.css')
const cropperOption = {
  aspectRatio: 1 / 1,
  ready: function (e) {
    console.log(e.type)
  },
  preview: '.img-preview',
  cropstart: function (e) {
    console.log(e.type, e.detail.action)
  },
  cropmove: function (e) {
    console.log(e.type, e.detail.action)
  },
  cropend: function (e) {
    console.log(e.type, e.detail.action)
  },
  zoom: function (e) {
    console.log(e.type, e.detail.ratio)
  },
  crop: function (e) {
    console.log(e.detail.x)
    console.log(e.detail.y)
    console.log(e.detail.width)
    console.log(e.detail.height)
    console.log(e.detail.rotate)
    console.log(e.detail.scaleX)
    console.log(e.detail.scaleY)
  },
  viewMode: 1,
  responsive: true
}
var cropperInstance = null
export default {
  data () {
    return {
      username: null,
      password: null,
      passwordRepeat: null,
      avatar: null,
      previewUrl: null,
      cropperShow: 'hidden',
      mimeType: null,
      resultUrl: null
    }
  },
  methods: {
    async submit () {
      if (this.password !== this.passwordRepeat) {
        alert('两次输入的密码不一致')
        return
      }
      try {
        let formData = new FormData()
        let avatarBlob = this.dataURLtoBlob(this.croppedImgBlog)
        console.log(avatarBlob)
        formData.append('username', this.username)
        formData.append('password', this.password)
        formData.append('avatar', avatarBlob)
        let registerData = await register(formData)
        console.log(registerData)
        this.$router.push({name: 'login'})
      } catch (e) {
        console.log(e)
      }
    },
    previewAvatar (e) {
      let container = document.querySelector('.img-container')
      let image = container.getElementsByTagName('img').item(0)
      let file = e.target.files[0]
      if (/^image\/\w+/.test(file.type)) {
        var reader = new FileReader()
        reader.onload = (e) => {
          this.previewUrl = e.target.result
          this.mimeType = this.getMimeType(e.target.result)
          if (cropperInstance) {
            cropperInstance.destroy()
          }
          image.src = e.target.result
          cropperInstance = new Cropper(image, cropperOption)
          this.cropperShow = 'visible'
        }
        reader.readAsDataURL(file)
      } else {
        alert('请选择图片')
      }
    },
    getCropperData () {
      var result = cropperInstance.getCroppedCanvas()
      this.resultUrl = result.toDataURL(this.mimeType)
      this.cropperShow = 'hidden'
    },
    dataURLtoBlob (dataurl) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      var bstr = atob(arr[1])
      var n = bstr.length
      var u8arr = new Uint8Array(n)
      while (n--) {
        u8arr[n] = bstr.charCodeAt(n)
      }
      return new Blob([u8arr], {type: mime})
    },
    getMimeType (dataurl) {
      var arr = dataurl.split(',')
      var mime = arr[0].match(/:(.*?);/)[1]
      return mime
    }
  },
  computed: {
    postUrl () {
      return register()
    },
    croppedImgBlog () {
      if (cropperInstance) {
        return cropperInstance.getCroppedCanvas().toDataURL(this.mimeType)
      }
    }
  }
}
</script>

<style scoped>
.clearfix::after {
  display: block;
  content: "";
  clear: both;
}
.register-container {
  padding: 20px;
  overflow: auto;
  height: 100%;
}
.cropper-container-scrollable {
  position: absolute!important;
  top: 0px;
  bottom: 0px;
  left: 0px;
  right: 0px;
  width: 100%;
  height: 100%;
  background: #ffffff;
  overflow: auto
}
.cropper-hidden {
  max-width: 100%
}
.img-container {
  width: 100%;
  min-height: 369px;
  max-height: 400px;
}
.preview-xs {
  width: 5rem;
  height: 2.5rem;
  margin-right: 0;
}
.preview-sm {
  width: 7.5rem;
  height: 2.75rem;
}
.preview-md {
  width: 10rem;
  height: 4.5rem;
}
.preview-lg {
  width: 12.5rem;
  height: 9rem;
}
.img-preview {
  float: left;
  margin-right: .5rem;
  margin-bottom: .5rem;
  overflow: hidden;
}
</style>
